<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- Upload Form -->
    <form id="upload-form" method="post" action="/api/upload" enctype="multipart/form-data">
      <input id="upload-files" name="files" type="file" multiple="multiple">
      <!--<input id="upload-submit-post" type="submit" value="Submit (post)">-->
    </form>
    <button id="upload-submit-ajax" onclick="upload();">Submit (ajax)</button>

    <!-- Upload Response -->
    <div id="upload-response"></div>

    <!-- Javascripts -->
    <script src="/lib/jquery/jquery.min.js"></script>
    <script>
      var upload = function () {
        var formDataUpload = new FormData($('#upload-form')[0]);
        
        $.ajax({
          type:        'POST',
          url:         '/api/upload',
          contentType: false,
          processData: false,
          dataType:    'json',
          data:        formDataUpload,
          success: function (data) {
            $("#upload-response").text('上传成功');
            console.log('Upload success, data:', data);
          },
          error: function (err) {
            $("#upload-response").text('上传失败');
            console.log('error:', err);
          }
        });
      }
    </script>
  </body>
</html>
